<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        .box2 {
           width:400px;
           height:1200px;
           background-color:grey;
           position: fixed;
           top: 0px;
           right: 0px;
        }
        .box1{
            float:left;
            width:1000px;
            background-color:lemonchiffon;
            height:2000px;
            position: relative;
            top:-100px;
            left:-100px;
            font-size:25px;
            border-right: solid 10px green;
        }
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
        .ggbox {
            position: fixed;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            right: 400px;
            top:200px
            /* display: block; */
        }
        .box1 img{
           width: 35px;
           height: 35px;  
        }
        .answer {
            color:lemonchiffon ;
        }
        .box3 {
           width:2000px;
           height:1200px;
           background-color:lemonchiffon;
           position: fixed;
           top: 0px;
           right: 0px;
        }
    </style>
</head>

<body>
    <div class="box3">
        p
    </div>
    <div class="box1" >
        <!-- 施工中 -->
        <span>
            <label for="">
                <img src="images/close.png" alt="" id="eye">
            </label>
        </span>
        <span>
            题干前部
        </span>
        <span class="answer" id="answerid">
            填空
        </span>
        <span>
            题干后部
        </span></br>
        <!-- 第二组 -->
        <!-- 以下为模板 -->
        <span>
            <label for="">
                <img src="images/close.png" alt="" id="eye1">
            </label>
        </span>
        <span class="answer" id="answerid1">
            HTTP
        </span>
        <!-- 以上为模板 -->
        <span>
            is a communication protocol that works with TCP/IP to get elements for Web pages to a locol browser.
        </span></br>
        <span>
            <label for="">
                <img src="images/close.png" alt="" id="eye2">
            </label>
        </span>
        <span>Ted Nelson coined the term</span>
        <span class="answer" id="answerid2">
            hypertext
        </span>
        <span>to describe a  computer system that could store literary documents,  link them in logical relationships, and allow readers to  comment and annotate on what they read

        </span></br>
        <!-- 以下为模板 -->
        <span>
            <label for="">
                <img src="images/close.png" alt="" id="eye3">
            </label>
        </span>
        <span>A</span>
        <span class="answer" id="answerid3">
            Web site
        </span>
        <span>
            typically contains a collection of related  information organized and formatted so it can be  accessed using a browser
        </span></br>
        <span>
            <label for="">
                <img src="images/close.png" alt="" id="eye4">
            </label>
        </span>
        <span>A</span>
        <span class="answer" id="answerid4">
            Web server
        </span>
        <span>is an Internet-based computer that stores  Web site content and accepts requests from browsers
        </span></br>
        <span>
            <label for="">
                <img src="images/close.png" alt="" id="eye5">
            </label>
        </span>
        <span>A </span>
        <span class="answer" id="answerid5">
            Web page
        </span>
        <span>is based on an HTML source document  that is stored as a file on a Web server

        </span>
    </br>
    <span>
        <label for="">
            <img src="images/close.png" alt="" id="eye6">
        </label>
    </span>
    <span>Web pages are connected by</span>
    <span class="answer" id="answerid6">
        hypertext links
    </span>
    <span>(commonly referred to simply as links)</span>
</br>
<span>
    <label for="">
        <img src="images/close.png" alt="" id="eye7">
    </label>
</span>
<span>Web pages have </span>
<span class="answer" id="answerid7">
    unidirectional links; 
</span>
<span>Document A links to  Document B, but not  vice versa
</span></br>
<span>
    <label for="">
        <img src="images/close.png" alt="" id="eye8">
    </label>
</span>
<span class="answer" id="answerid8">
    Bidirectional links
</span>
<span>connect two documents  using a two-way link  that can be followed  from either document

</span>
</br>
<span>
    <label for="">
        <img src="images/close.png" alt="" id="eye9">
    </label>
</span>
<span>Several services, such as Bitly and Goo.gl, create

</span>
<span class="answer" id="answerid9">
    short  URLs
</span>
</br>
        <!-- 以上为模板 -->
            </div>
            <script>
    var eye = document.getElementById('eye');
            var flag = 0;
            eye.onclick = function() { 
                if (flag == 0) {
                    eye.src = 'images/open.png';
                    flag = 1;
                    x=document.getElementById("answerid");
                    x.style.color="Red";
                } else  {
                    eye.src = 'images/close.png';
                    flag = 0;
                    x=document.getElementById("answerid");
                    x.style.color="lemonchiffon";
                    }
            }
        
    // 以下为模板
    var eye1 = document.getElementById('eye1');
    var flag1 = 0;
        eye1.onclick = function() { 
            if (flag1 == 0) {
                eye1.src = 'images/open.png';
                flag1 = 1;
                x1=document.getElementById("answerid1");
                x1.style.color="Red";
                } else  {
                            eye1.src = 'images/close.png';
                            flag1 = 0;
                            x1=document.getElementById("answerid1");
                            x1.style.color="lemonchiffon";
                            }
                    }
    // 以上为模板
    var eye2 = document.getElementById('eye2');
    var flag2 = 0;
        eye2.onclick = function() { 
            if (flag2 == 0) {
                eye2.src = 'images/open.png';
                flag2 = 1;
                x2=document.getElementById("answerid2");
                x2.style.color="Red";
                } else  {
                            eye2.src = 'images/close.png';
                            flag2 = 0;
                            x2=document.getElementById("answerid2");
                            x2.style.color="lemonchiffon";
                            }
                    }
    var eye3 = document.getElementById('eye3');
    var flag3 = 0;
        eye3.onclick = function() { 
            if (flag3 == 0) {
                eye3.src = 'images/open.png';
                flag3 = 1;
                x3=document.getElementById("answerid3");
                x3.style.color="Red";
                } else  {
                            eye3.src = 'images/close.png';
                            flag3 = 0;
                            x3=document.getElementById("answerid3");
                            x3.style.color="lemonchiffon";
                            }
                    }
var eye4 = document.getElementById('eye4');
    var flag4 = 0;
        eye4.onclick = function() { 
            if (flag4 == 0) {
                eye4.src = 'images/open.png';
                flag4 = 1;
                x4=document.getElementById("answerid4");
                x4.style.color="Red";
                } else  {
                            eye4.src = 'images/close.png';
                            flag4 = 0;
                            x4=document.getElementById("answerid4");
                            x4.style.color="lemonchiffon";
                            }
                    }
var eye5 = document.getElementById('eye5');
var flag5 = 0;
        eye5.onclick = function() { 
            if (flag5 == 0) {
                eye5.src = 'images/open.png';
                flag5 = 1;
                x5=document.getElementById("answerid5");
                x5.style.color="Red";
                } else  {
                            eye5.src = 'images/close.png';
                            flag5 = 0;
                            x5=document.getElementById("answerid5");
                            x5.style.color="lemonchiffon";
                            }
                    }
var eye6 = document.getElementById('eye6');
var flag6 = 0;
        eye6.onclick = function() { 
            if (flag6 == 0) {
                eye6.src = 'images/open.png';
                flag6 = 1;
                x6=document.getElementById("answerid6");
                x6.style.color="Red";
                } else  {
                            eye6.src = 'images/close.png';
                            flag6 = 0;
                            x6=document.getElementById("answerid6");
                            x6.style.color="lemonchiffon";
                            }
                    }
var eye7 = document.getElementById('eye7');
var flag7 = 0;
        eye7.onclick = function() { 
            if (flag7 == 0) {
                eye7.src = 'images/open.png';
                flag7 = 1;
                x7=document.getElementById("answerid7");
                x7.style.color="Red";
                } else  {
                            eye7.src = 'images/close.png';
                            flag7 = 0;
                            x7=document.getElementById("answerid7");
                            x7.style.color="lemonchiffon";
                            }
                    }
var eye8 = document.getElementById('eye8');
var flag8 = 0;
        eye8.onclick = function() { 
            if (flag8 == 0) {
                eye8.src = 'images/open.png';
                flag8 = 1;
                x8=document.getElementById("answerid8");
                x8.style.color="Red";
                } else  {
                            eye8.src = 'images/close.png';
                            flag8 = 0;
                            x8=document.getElementById("answerid8");
                            x8.style.color="lemonchiffon";
                            }
                    }
var eye9 = document.getElementById('eye9');
var flag9 = 0;
        eye9.onclick = function() { 
            if (flag9 == 0) {
                eye9.src = 'images/open.png';
                flag9 = 1;
                x9=document.getElementById("answerid9");
                x9.style.color="Red";
                } else  {
                            eye9.src = 'images/close.png';
                            flag9 = 0;
                            x9=document.getElementById("answerid9");
                            x9.style.color="lemonchiffon";
                            }
                    }

                    </script>
    <div class="box2">
    <form action="xxx.php" method="get"></form>
    <input type="text" name="" id=""value="请输入内容">
    <button>记笔记</button>
    <ul>

    </ul>
    </div>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('input');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else if(text.value == '请输入内容') {
                alert('您没有输入内容');
                return false;}
                else{
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '请输入内容') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '请输入内容';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';

        }
        
    </script>
    <div class="ggbox">
        升学版2048</br>
        火爆来袭！</br>
        GGN原版打造</br>
        wzl改为升学版</br>
        操作只需左上右键</br>
        <a href="https://wangzilongbupt.gitee.io/thank-you---ggn-2048/" target="_blank">点击开玩</a>
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var ggbox = document.querySelector('.ggbox');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            ggbox.style.display = 'none';
        }
    </script>
</body>

</html>